/*
 * @Author: wangtao
 * @Date: 2020-08-20 14:07:42
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-02 09:58:40
 * @Description:
 */

import React from 'react';
import {
  View,
  StyleSheet,
  Image,
  Text,
  PixelRatio,
  TouchableOpacity,
} from 'react-native';
import {
  iconLoopGreen,
  iconRightGray,
} from '@/images';
import { Button, } from '@/common';
import {
  fontColorDeepGreen,
  fontColorLightGreen,
  px2dp,
  mainBgColorWhite,
  fontColorDeepGray,
} from '@/styles';

const { Submit } = Button;

export default class HeaderLine extends React.PureComponent {
  render() {
    const { onChangeModal, canLeave, isApplyDis } = this.props;
    return (
      <TouchableOpacity style={styles.container} activeOpacity={0.8} onPress={() => onChangeModal({ type: 'applyLeaveModelIsShow', val: true, })}>
        <View style={styles.headerStatus}>
          <Image
            source={iconLoopGreen}
            resizeMode='contain'
            style={styles.loopImg}
          />
          <Text style={styles.headerStatusText}>工作中</Text>
        </View>
        <View style={styles.headerRight}>
          <Text style={styles.headerTipsText}>我要请假/修车</Text>
          <Image
            source={iconRightGray}
            resizeMode='contain'
            style={styles.rightImg}
          />
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: px2dp(702),
    height: px2dp(104),
    paddingHorizontal: px2dp(32),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: mainBgColorWhite,
    borderRadius: px2dp(16),
    marginTop: px2dp(24)
  },
  loopImg: {
    width: px2dp(36),
    height: px2dp(36),
  },
  headerStatus: {
    width: px2dp(168),
    height: px2dp(60),
    flexDirection: 'row',
    borderWidth: 1 / PixelRatio.get(),
    borderRadius: px2dp(30),
    borderColor: fontColorDeepGreen,
    backgroundColor: fontColorLightGreen,
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: px2dp(20),
  },
  headerStatusText: {
    fontSize: px2dp(26),
  },
  headerTipsText: {
    fontSize: px2dp(28),
    color: fontColorDeepGray
  },
  headerRight: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  rightImg: {
    width: px2dp(28),
    height: px2dp(28)
  }
});
